HTML Forms:

1. What is a Form?

Forms in HTML are used to collect user input. Example: login form, registration form, feedback form, etc.

<form>
    ... form elements here ...
</form>
    

2. The <form> Tag and Name Attribute

The <form> tag defines the form. Each input uses a name attribute which is important when sending data to the server.

<form>
    Username: <input type="text" name="username">
</form>
    

3. Radio Buttons

Radio buttons let users select only one option from a group. All radio buttons in the same group must have the same name.

Gender: 
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
    

4. The for Attribute

The for attribute in <label> tag connects a label to an input field using its id. Clicking the label selects the input automatically.

<label for="email">Email:</label>
<input type="email" id="email" name="email">
    

5. Checkboxes

Checkboxes let users select multiple options.

Hobbies: 
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports
<input type="checkbox" name="hobby" value="music"> Music
    

6. Placeholder Attribute

The placeholder shows hint text inside the input box until the user types something.

<input type="text" name="fullname" placeholder="Enter your full name">
    

7. Uploading Files

The file input type allows users to upload files from their computer.

<input type="file" name="resume">
    

8. Email and Phone Number Input

Special input types exist for email and phone numbers.

<input type="email" name="email" placeholder="Enter your email">
<input type="tel" name="phone" placeholder="Enter your phone number">
    

9. Textarea Tag

The <textarea> is used for multi-line input (like comments or feedback).

<textarea name="message" rows="5" cols="40">
Type your message here...
</textarea>
    

10. Dropdown (Select & Option)

Dropdown menus let users select from a list of options.

<label for="city">Choose a city:</label>
<select name="city" id="city">
    <option value="delhi">Delhi</option>
    <option value="mumbai">Mumbai</option>
    <option value="kolkata">Kolkata</option>
</select>
    

11. Submit Button

The submit button is used to send form data.

<input type="submit" value="Submit">
    

12. Required Attribute

Adding the required attribute ensures the field must be filled before submitting.

<input type="text" name="username" placeholder="Enter username" required>
    

13. Full Example Form

🏠 Homepage | ⬅ Previous Lecture | ➡ Next Lecture